<template>
    <!-- 搜索 -->
    <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="等级名称">
            <el-input v-model="search.name" placeholder="请输入等级名称" clearable />
        </el-form-item>
        <el-form-item label="升级方式">
            <el-select
            v-model="dengji.mode"
            placeholder="升级方式"
            clearable
            >
                <el-option label="默认获取" value="默认获取" />
                <el-option label="付费升级" value="付费升级" />
                <el-option label="累计消费次数升级" value="累计消费次数升级" />
                <el-option label="累积消费金额升级" value="累积消费金额升级" />
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
            <el-select
                v-model="dengji.state"
                placeholder="状态"
                clearable
                >
                <el-option label="启用" value="启用" />
                <el-option label="禁用" value="禁用" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="onSubmit">重置</el-button>
            <el-button @click="addGradeShow = true">+ 新增</el-button>
        </el-form-item>
    </el-form>
    <!-- 新增弹窗 -->
    <el-dialog v-model="addGradeShow" width="788px">
        <template #header> <div class="plusvip">新增会员等级</div> </template>
        <el-form ref="addfrom" :model="dengji" :rules="rules" label-position=right>
            <el-form-item label="等级" prop="grade" label-width="140">
                <el-input v-model="dengji.grade" placeholder="请输入等级，正整数"/>
            </el-form-item>
            <el-form-item label="等级名称" prop="name" label-width="140">
                <el-input v-model="dengji.name" placeholder="请输入等级名称"/>
            </el-form-item>
            <el-form-item label="升级条件描述" label-width="140">
                <el-input v-model="dengji.condition" placeholder="请输入升级条件描述"/>
            </el-form-item>
            <el-form-item label="升级权益描述" label-width="140">
                <el-input type="textarea" v-model="dengji.equal" placeholder="请输入升级权益描述"/>
            </el-form-item>
            <el-form-item label="升级方式" prop="mode" label-width="140">
            <el-select
              v-model="dengji.mode"
              placeholder="升级方式"
              clearable
            >
                <el-option label="默认获取" value="默认获取" />
                <el-option label="付费升级" value="付费升级" />
                <el-option label="累计消费次数升级" value="累计消费次数升级" />
                <el-option label="累积消费金额升级" value="累积消费金额升级" />
            </el-select>
            </el-form-item>
            <el-form-item label="升级条件值" prop="price" label-width="140">
                <el-input v-model="dengji.price" placeholder="请输入升级条件值，单位可能是元、次"/>
            </el-form-item>
            <el-form-item label="有效天数" prop="validity" label-width="140">
                <el-input v-model="dengji.validity" placeholder="请输入有效天数，如30, 0表示永久有效"/>
            </el-form-item>
            <el-form-item label="支付折扣" prop="discount" label-width="140">
                <el-input v-model="dengji.discount" placeholder="请输入支付折扣, 数字, 如: 8.8"/>
            </el-form-item>
            <el-form-item label="积分加速" prop="multiple" label-width="140">
                <el-input v-model="dengji.multiple" placeholder="请输入积分加速, 积分加速倍数, 数字"/>
            </el-form-item>
            <el-form-item label="状态" label-width="140">
            <el-radio-group v-model="dengji.state">
              <el-radio :label=1>启用</el-radio>
              <el-radio :label=0>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="addGradeShow = false">取消</el-button>
            <el-button @click="addGradeA" type="primary">确定</el-button>
        </span>
        </template>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog v-model="editGradeShow" width="788px">
        <template #header> <div class="plusvip">编辑会员等级</div> </template>
        <el-form ref="addfrom" :model="editDengji" :rules="rules" label-position=right>
            <el-form-item label="等级" prop="grade" label-width="140">
                <el-input v-model="editDengji.grade" placeholder="请输入等级，正整数"/>
            </el-form-item>
            <el-form-item label="等级名称" prop="name" label-width="140">
                <el-input v-model="editDengji.name" placeholder="请输入等级名称"/>
            </el-form-item>
            <el-form-item label="升级条件描述" label-width="140">
                <el-input v-model="editDengji.condition" placeholder="请输入升级条件描述"/>
            </el-form-item>
            <el-form-item label="升级权益描述" label-width="140">
                <el-input type="textarea" v-model="editDengji.equal" placeholder="请输入升级权益描述"/>
            </el-form-item>
            <el-form-item label="升级方式" prop="mode" label-width="140">
            <el-select
              v-model="editDengji.mode"
              placeholder="升级方式"
              clearable
            >
                <el-option label="默认获取" value="默认获取" />
                <el-option label="付费升级" value="付费升级" />
                <el-option label="累计消费次数升级" value="累计消费次数升级" />
                <el-option label="累积消费金额升级" value="累积消费金额升级" />
            </el-select>
            </el-form-item>
            <el-form-item label="升级条件值" prop="price" label-width="140">
                <el-input v-model="editDengji.price" placeholder="请输入升级条件值，单位可能是元、次"/>
            </el-form-item>
            <el-form-item label="有效天数" prop="validity" label-width="140">
                <el-input v-model="editDengji.validity" placeholder="请输入有效天数，如30, 0表示永久有效"/>
            </el-form-item>
            <el-form-item label="支付折扣" prop="discount" label-width="140">
                <el-input v-model="editDengji.discount" placeholder="请输入支付折扣, 数字, 如: 8.8"/>
            </el-form-item>
            <el-form-item label="积分加速" prop="multiple" label-width="140">
                <el-input v-model="editDengji.multiple" placeholder="请输入积分加速, 积分加速倍数, 数字"/>
            </el-form-item>
            <el-form-item label="状态" label-width="140">
            <el-radio-group v-model="editDengji.state">
              <el-radio :label=1>启用</el-radio>
              <el-radio :label=0>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="editGradeShow = false">取消</el-button>
            <el-button @click="editDengjiOK" type="primary">确定</el-button>
        </span>
        </template>
    </el-dialog>
    <Page>
        <template #ct>
            <!-- 等级列表 -->
            <el-table :data="gradeList" style="width: 100%" >
                <el-table-column prop="grade" label="等级" />
                <el-table-column prop="name" label="等级名称" />
                <el-table-column prop="mode" label="升级方式" align="center" />
                <el-table-column prop="price" label="升级条件值" align="center"/>
                <el-table-column prop="validity" label="有效天数" align="center"/>
                <el-table-column prop="discount" label="支付折扣" align="center"/>
                <el-table-column prop="multiple" label="积分加速" align="center"/>
                <el-table-column prop="state" label="状态" align="center">
                    <template #default="{row}">
                        <el-switch
                            :before-change="()=>changeSwitch(row, row.state, row.id)"
                            v-model="row.state"
                            class="ml-2"
                            :inactive-text="0"
                            :active-value="1"
                            style="--el-switch-on-color: #00acac; --el-switch-off-color: #dcdfe6"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="mode" label="操作" align ="center">
                    <template #default="{ row }">
                        <span @click="handleShowEdit({...row})" class="edit">
                        <span class="iconfont icon-xiugai"></span>
                            修改
                        </span>
                        <span @click="delMember(row.id)" class="edit">
                        <span class="iconfont icon-shanchu"></span>
                            删除
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template #ft>
            <el-pagination
                layout="total, prev, pager, next, sizes, jumper"
                background
                :page-sizes="[10, 30, 50, 100]"
                :total="total"
                :default-page-size="limit"
                :current-page="page"
                @size-change="handeSizeChange"
                @current-change="handlePageChange"
            />
        </template>
    </Page>
</template>
<script lang="ts" src="./index"></script>
<style lang="scss" scoped>
@import './style.scss';
</style>
